<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        

        #wrap{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding-left:30px ;
            padding-right:30px ;
            position: relative;
        }
        #wrap .title{
            background: rgb(110, 108, 108);
            margin-bottom: 30px;
            border-radius: 15px;
        }
		#wrap .title .text{
            display: inline-block;
            width: 100%;
		    font-family: "Microsoft YaHei";
		    font-size: 60px;
		    text-align: center;
		    background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;/*设置线性渐变*/
		    -webkit-background-size: 160px;                        /*设置背景大小*/
		    -webkit-background-clip: text;                            /*背景被裁剪到文字*/
		    -webkit-text-fill-color: rgba(255, 255, 255, 0.3);        /*设置文字的填充颜色*/
		    -webkit-animation: shine 3s infinite;                    /*设置动画*/
		}
		@-webkit-keyframes shine{   /*创建动画*/
		    0%{
		        background-position: 0 0;
		    }
		    100%{
		        background-position: 100% 100%;
		    }
		}

        #wrap .add{
            text-decoration: none;
            color: hotpink;
            position: absolute;
            right: 80px;
            top: 30px;
        }

        #wrap .blogs{
            width: 100%;
            border: 2px solid rgba(87, 86, 86, 0.3);
            border-radius: 15px;
            box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.2);
        }
        #wrap .blogs .list .item{
            margin-left: 10px;
            margin-top:10px ;
            margin-bottom: 20px;
            border: 1px solid rgba(87, 86, 86, 0.3);
            border-radius: 15px;
            padding: 10px;
            width: 90%;

            color: rgb(88, 88, 202);
            text-decoration: underline;
            position: relative;
        }
        #wrap .blogs .list .item .content{
            display: flex;
            align-items: center;
        }
        #wrap .blogs .list .item .content .logo{
            height: 150px;
        }
        #wrap .blogs .list .item .close{
            font-size: 30px !important;
            position:absolute;
            right: -83px;
            top: 88px;
        }
        #wrap .blogs .list .item .close:hover{
            color: red;
            /* 将元素放大为原来的1.5倍 */
            transform: scale(1.5);
            cursor: pointer;
        }

    </style>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3991423_7mob4sgg4lk.css">
</head>
<body>
    <div id="wrap">
        <h1 class="title">
            <span class="text">欢迎来到丁光头博客</span>
        </h1>
        <a class="add" href="./add.html">add blog</a>
        <div class="blogs">
            <ul class="list">
                
            </ul>
        </div>
    </div>
</body>
<script src="./js/moment.js"></script>
<script>
    //更新逻辑
    function go(id,title,content){
        localStorage.setItem("title",title);
        localStorage.setItem("content",content)
        window.location.href = `./update.html?id=${id}&xxx=xxx`
    }
    //删除逻辑
    function del(id,title){
        var result = confirm(`真的要删除"${title}"吗?`);
        if(result === true){
            //发生ajax请求
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", function () {
                //请求完成
                var res = JSON.parse(this.responseText)
                if(res.data !== "error"){
                    //刷新界面
                    location.reload()
                }else{
                    alert(res.message)
                }
            });
            xhr.open("GET", `http://127.0.0.1:8080/api/blog/del?id=${id}`);
            xhr.withCredentials=true;
            xhr.send();
        }
    }

    window.onload=function(){
        //获取博客内容进行渲染  
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", function () {
            //请求完成
            var res = JSON.parse(this.responseText)
            var list = res.data;
            if(list !== "error"){
                var ulText="";
                for(var i=0;i<list.length;i++){
                    var item = list[i];
                    var id = item.id;
                    var title = item.title;
                    var content = item.content;

                    //将时间戳变成标准的日期格式
                    var createtime = item.createtime * 1;
                    var time = moment(new Date(createtime)).format('YYYY-MM-DD kk:mm:ss')
                    ulText+=`<li class="item">
                        <span>${title}</span>
                        <div class="content">
                            <img class="logo" src="./images/csdn.webp">
                            <span>${content}</span>
                        </div>
                        <span>${time}</span>
                        <span class="icon-guanbi1 iconfont close" onclick="del(${id},'${title}')"></span>
                        <span style="color:red;margin-left:30px;cursor:pointer;" onclick="go('${id}','${title}','${content}')">(更新)</a>
                    </li>`
                }
                //渲染界面
                var ul = document.querySelector("#wrap > .blogs .list");
                ul.innerHTML = ulText;
            }else{
                alert("获取列表失败")
            }

        });
        xhr.open("GET", "http://127.0.0.1:8080/api/blog/list");
        xhr.withCredentials=true;
        xhr.send();
    }
</script>
</html>

